<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smile</title>
    <!-- 引入 bootstar.css -->
   <link rel="stylesheet" th:href="@{/static/css/bootstrap.css}">
   <script src="/static/js/scriptindex.js"></script>
   <script src="/static/js/jquery.min.js"></script>
   <script src="/static/js/bootstrap.js"></script>
   <script src="/static/lib/layui/layui.js"></script>
   
   <style type="text/css">
   
  #kuang{
	background-color:white;
	line-height:2.5;
	margin-bottom: 20px;
  }
  .tou{
 	box-shadow:1px 1px 1px darkgray,-1px -1px 1px darkgray;
  }
  .m-fixed {
    position: fixed !important;
    z-index: 10 !important;
 }

   .m-right-bottom {
    bottom: 10px !important;
    right: 10px !important;
  }
  #add{
    cursor:pointer;
  }
  
 @media (max-width: 576px) { 
     .duandian{
         font-size: 13px !important;
     }
     
      .duandian2{
         font-size: 9px !important;
     }
  }
  
  
   </style>
   
</head>
<body style="background-image: url('../static/img/bj.png');">
<script type="text/javascript">
   function bj(){
	  var opacity = document.getElementById("daohang").style.opacity;
	  if(opacity<1){
	    document.getElementById("daohang").style.opacity=1;
	  }else{
	    document.getElementById("daohang").style.opacity=0.8;
	  }
	 
	  if( ($("#fill").css("display"))!="none"){
	    $("#fill").css("display","none");
	  }else{
	    $("#fill").css("display","list-item");
	  }
	  }
	  
	  
	  
	  	 //这个不是写在首页，写在子页面（子页面才能返回，写在首页点击返回就是退出）
//不用引入mui.js，都是h5方法
document.addEventListener('plusready', function() {
    var webview = plus.webview.currentWebview();
    plus.key.addEventListener('backbutton', function() {
        webview.canBack(function(e) {
            if(e.canBack) {
                webview.back();
            } else {
                webview.close(); //hide,quit
                //plus.runtime.quit();
            }
        })
    });
});
	  
</script>

   <!-- 头部的模板 -->
<div th:replace="fragment/head::head"></div> 

<div class="container-sm ">
  <!-- Content here -->
<!-- 公告 -->
      <!-- 公告 -->
       <div class="row" style="margin-top: 20px">
         <div class="col-md-12 col-12 col-xl-12 " >
           <p id="kuang" class="layui-anim layui-anim-scaleSpring tou">
            <a href="/blog/index" style="margin-left:30px;color: darkgray">网站首页 </a>&nbsp;
             <i class="layui-icon  layui-icon-next" style="font-size: 1px"></i>&nbsp; 
            <span> 友情链接 </span> 
           </p>
         </div>
       </div>

      <div class="row">
      
         <div th:each="blogroll,blogrollStat:${list}" class="layui-anim layui-anim-scaleSpring col-6 col-sm-6 col-md-4 col-lg-3 col-xl-3 col-fluid-2 ">
        
            <!-- 博主 -->
                 <div class="card text-center layui-anim layui-anim-up">
                      <div class="card-body">
                        <div class="card-title"><img alt="" th:src="@{${blogroll.imgUrl}}" style="width:60%;border-radius: 50%" class="tou zhuan"> </div>
                        <p style="font-weight:bold;font-size: 18px" class="card-title duandian" th:text="${blogroll.nickName}">Smile </p>
                         <p class="card-text"><i class="layui-icon layui-icon-edit"></i>&nbsp;<span style="font-size: 13px" class="duandian2" th:text="${blogroll.motto}"></span> </p>
                           <br>
                        <div >
                        <a th:href="@{${blogroll.blogHref}}" style="text-decoration: none"><button style="width: 100%" type="button" class="btn btn-success">Go &nbsp;<i class="layui-icon layui-icon-next"></i></button></a> 
                        </div> 
                       
                      </div>
                 </div>
                 
                 
            
        </div>
        
        

      </div>
</div>



</body>


 <div id="addbotton" style="display: none">
 
   <form class="layui-form" action="" >
  
    <input type="hidden" name="email" th:value="${session.user!=null?session.user.email:''}">
 
       <div class="layui-form-item">
         <label class="layui-form-label">网站名</label>
           <div class="layui-input-inline">
            <input type="text" name="nickName" required lay-verify="required" placeholder="请输入网站名" autocomplete="off" class="layui-input">
           </div>
        
      </div>
       
       <div class="layui-form-item">
         <label class="layui-form-label">描述</label>
           <div class="layui-input-inline">
            <input type="text" name="motto" required lay-verify="required" placeholder="请输入网站描述" autocomplete="off" class="layui-input">
           </div>
        
      </div>
     
       <div class="layui-form-item">
         <label class="layui-form-label">地址</label>
           <div class="layui-input-inline">
            <input type="text" name="blogHref" required lay-verify="required" placeholder="请输入网站地址" autocomplete="off" class="layui-input">
           </div>
      </div>
      
       <div class="layui-form-item">
         <label class="layui-form-label">头像url</label>
           <div class="layui-input-inline">
            <input type="text" name="imgUrl" required lay-verify="required" placeholder="请输入头像url" autocomplete="off" class="layui-input">
           </div>
        
      </div>
      
        <div class="layui-form-item">
              <button style="width: 90%;margin-left: 5%" class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
        </div>
 
     </form>
     
  </div>



<!-- 屏幕右边按钮组 -->
  <div class="m-fixed m-right-bottom" th:onclick="addblogroll([[${session.user!=null?session.user.email:''}]])" style="border-radius:50%;background-color: #28a745;padding: 8px 15px">
     <div id="add">
       <p>添加</p>
       <p>友链</p>
     </div> 
 </div>
 

 
 <script>
 
              layui.use('layer', function(){
                  var layer = layui.layer;
                  layer.msg('右下角可添加友链 ');
              }); 
 
 
//Demo


layui.use('form', function(){
  var form = layui.form;
  
  //监听提交
  form.on('submit(formDemo)', function(data){
     
    $.post(
            "/blogroll/add" ,
            {nickName:data.field.nickName, motto:data.field.motto, blogHref:data.field.blogHref,imgUrl:data.field.imgUrl,email:data.field.email},
            function(data){
            //回调
            if(data.result=="true"){
               layui.use('layer', function(){
                 var layer = layui.layer;
                 layer.msg('已提交申请! 审核结果会发送至您的邮件',{icon:1});
             }); 
             
             //刷新页面
          // location.reload();
            }else{
            
              layui.use('layer', function(){
                  var layer = layui.layer;
                  layer.msg('提交失败! ',{icon:5});
              }); 
              
            }
            
            }  
    )
  
    return false;
  });
});
</script>
 

   <script type="text/javascript">
   
   function addblogroll(email){
   
       if(email==""){
       
         layui.use('layer', function(){
              var layer = layui.layer;
            layer.alert('请登录并绑定邮箱再添加',{icon:5});
          });              
        
      }else{
      
     layui.use('layer', function(){
     var layer = layui.layer;
     var  W = $(window).width(); 
     
     if(W<500){
       var tishi = '340px';
       var tu = '300px';
     }else{
        var tishi = '440px';
        var tu = '400px';
     }     
  
  //提示层
       layer.open({
        title:'友链格式如下',
        area: tishi ,
        content: "<img style='width:"+tu+"' src='https://taoyida.top/static/imgblog/moban.png'>",
        btn:'下一步',
       yes: function(index, layero){
       
// 弹出输入层      
       layer.open({
         title:"请填写友链信息",
         type: 1,
         content: $("#addbotton") //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
       });
       
       
      //do something
       layer.close(index); //如果设定了yes回调，需进行手工关闭
          }
     });        
      
  

       
    }); 
      
      }
     
      
    }



 $(".zhuan").mousemove(function() {
    	$(this).addClass("layui-anim-rotate");
    })
     $(".zhuan").mouseout(function() {
    	$(this).removeClass("layui-anim-rotate");
    });
    
    </script>
    
</html>
